<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-table
      :data="dictList"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="名称" prop="name" />
      <el-table-column label="编码" prop="dictCode" />
      <el-table-column label="值" prop="value" />
      <el-table-column label="创建时间" prop="createTime" />
    </el-table>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Dictionary",
});
</script>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { reqDictSuperiortList } from "@/api/dict";
import { DictSuperiorItemType, DictSuperiorListType } from "@/api/dict/types";
const dictList = ref<DictSuperiorListType>([]);
/**
 * 封装请求一级列表函数
 */
const getDictOneList = async () => {
  const res = await reqDictSuperiortList(1);
  dictList.value = res;
};

onMounted(() => {
  getDictOneList();
});

const load = async (
  row: DictSuperiorItemType,
  _: unknown,
  resolve: (date: DictSuperiorItemType[]) => void
) => {
  const res = await reqDictSuperiortList(row.id);
  resolve(res);
};
</script>

<style scoped></style>
